<template>
	<view class="goods-detail-container" v-if="preloaded">
		<uv-navbar bg-color="rgba(0,0,0,0)">
			<template v-slot:left>
				<view class="uv-nav-slot-left" @click="goBack">
					<uv-icon name="arrow-left" size="20" color="#ffffff"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<view class="goods-thumb-box">
			<image :src="$thumbImg(item.goods_thumb, '750x500')" mode="" @click="previewImage([item.goods_thumb])">
			</image>
		</view>
		<view class="bg-white padding-24 padding-top-30">
			<view class="margin-top-22">
				<text class="font-32">{{item.name}}</text>
			</view>
			<view class="desc colorGray font-24 padding-bottom-18 padding-top-8" v-if="item.goods_summary">
				<text>{{item.goods_summary}}</text>
			</view>
			<!-- 店铺信息 -->
			<view class="bg-white ti-flex margin-top-22 " v-if="showShop === '1'" @click="navToShop(item)">
				<!-- logo_src -->
				<view class="">
					<image v-if="item.shop_ID[0].logo_src" :src="item.shop_ID[0].logo_src" mode="aspectFill"
						class="image-width-80 border-radius"></image>
					<view class="custom-logo-box" v-else>
						<text class="logo-box-name">{{shortNameText}}</text>
					</view>
				</view>

				<view class="flex-1 margin-left-16">
					<text class="font-bold font-28 color-f40">{{item.shop_ID[0].shop_name.full_name}}</text>
					<view class="font-24">
						<!-- <text>评分</text>
						<text class="colorRed margin-left-4">{{item.shop.score_text}}</text>
						<text class="margin-left-10">月售</text>
						<text class="colorRed margin-left-4">{{item.shop.month_sell_text}}</text> -->
						<!-- <text class="margin-left-10">关注</text>
						<text class="colorRed margin-left-4">{{item.shop.focus_text}}</text>
						<text class="margin-left-4">人</text> -->
					</view>
				</view>
				
				<uni-icons type="right" color="#999" size="20"></uni-icons>
			</view>

		</view>
		<view class="bg-white padding-24 padding-top-30 margin-top-10">
			<view class="product-detail-title">
				<text class="font-30 color-555 margin-left-20 ">产品详情：</text>
			</view>
		</view>
		<view class="" v-if="item.goods_imgs&&item.goods_imgs.length>0">
			<wjf-product-imglist :imgsData="item.goods_imgs"></wjf-product-imglist>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				preloaded: false,
				loaded: false,
				current: 0,
				bottomOptions: [],
				buttonGroup: [],
				selectSku: {},
				defaultSkuId: "",
				group_buying_id: "",
				description: [],
				defaultPrice: 0,
				allGroupBuying: [],
				groupBuying: [],
				groupBuyingTotal: 0,
				maxShowAllGroupBuying: 10,
				isSubmitSku: 0,
				showShop: null ,//是否显示商铺  
				item: {},
			}
		},
		computed: {
			shortNameText() {
				return this.item.shop_ID[0].shop_name.short_name.length > 8 ? this.item.shop_ID[0].shop_name.short_name
					.slice(0, 7) :
					this.item.shop_ID[0].shop_name.short_name
			}
		},
		onLoad(e) {
			//只有商品id
			// this.item = this.getItemData();
			if (!this.item) {
				this.item = {}
			}
			if (this.item._id) {
				// this.loaded = true;
				this.preloaded = true;
			}
			if (e.id) {
				this.item._id = e.id;
			}
			this.showShop = e.tt
			// //默认选中规格
			// if (e.sku) {
			// 	this.defaultSkuId = e.sku;
			// 	this.defaultPrice = e.price;
			// }
			//临时用一下轮播图
			// if (this.item.goods_thumb) {
			// 	this.item.goods_banner_imgs = [this.$thumbImg(this.item.goods_thumb, '750x750')];
			// }
			this.loadData()
			// #ifdef MP-WEIXIN
			wx.onShareAppMessage(() => {
				return {
					title: '恒汇导视',
					imageUrl: '' // 图片 URL
				}
			})
			// #endif
		},
		methods: {
			navToShop(item) {
				console.log(item);
				uni.navigateTo({
					url: '../shop/shop?id=' + item.shop_ID[0]._id +'&shopID='+item.shop_ID[0].ID,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 按地址
			previewImage(src) {
				uni.previewImage({
					urls: src
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async loadData() {
				const productColl = db.collection("tian-mall-products").where(`_id=="${this.item._id}"`).field(
					"goods_sn,name,goods_thumb,category_id,shop_ID,keywords,goods_desc,goods_summary,goods_imgs"
				).getTemp()
				const shopColl = db.collection('tian-mall-shops').field('ID,banner,shop_name,logo_src').getTemp()
				await db.collection(productColl, shopColl).get().then(({
					result
				}) => {
					console.log(result);
					this.description = [];

					this.item = result.data[0];
					this.preloaded = true;
					this.loaded = true;
					// this.buildData();
					// this.updateBottomOptions()
					// this.getGroupBuying();
					// this.setGlobalShareContent(false, {
					// 	goods: result.data
					// }, "product/detail")
				});
				// this.updateBottomOptions();
			},
			buildData(item) {
				//处理轮播图
				if (this.item.goods_banner_imgs) {
					this.item.goods_banner_imgs = this.item.goods_banner_imgs.map(img => {
						return this.$thumbImg(img, '750x750');
					})
				}
			},
			updateBottomOptions() {
				let options = [{
					icon: 'dianpu',
					text: '首页',
				}];
				if (this.item.is_on_sale) {
					if (this.item.is_fav) {
						options.push({
							icon: 'biaoxingfill',
							color: "#ff5a1d",
							text: '已收藏'
						})
					} else {
						options.push({
							icon: 'biaoxing',
							color: "#646566",
							text: '收 藏'
						})
					}
				}
				options.push({
					icon: 'gouwuche',
					text: '购物车',
					// info: this.cartCount
				})
				this.bottomOptions = options;
				if (!this.item.is_on_sale) {
					this.buttonGroup = [{
						text: '商品已下架',
						backgroundColor: '#878787',
						color: '#fff'
					}];
					return;
				}
				this.buttonGroup = [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				];
				if (this.item.group_buying) {
					this.buttonGroup = [{
						text: '立即购买',
						backgroundColor: '#aeaeae',
						color: '#fff'
					}, {
						text: '拼单购买',
						backgroundColor: '#e64340',
						color: '#fff'
					}];
				} else if (!this.item.is_real) {
					this.buttonGroup = [{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}];
				}
			},
			checkFav() {
				db.collection('tian-mall-favorite')
					.where(`user_id==$cloudEnv_uid && type=='goods' && id=="${this.item._id}"`)
					.field('_id')
					.get({
						getOne: true
					})
					.then(({
						result
					}) => {
						console.log('checkFav result', result.data);
						this.is_fav = !!result.data;
					})
			},
			saveFav() {
				if (!this.isLogin) {
					this.navToLoginNotice(() => {
						this.checkFav();
					});
					return;
				}
				if (this.item.is_fav) {
					//取消收藏
					db.collection("tian-mall-favorite").where(
						`user_id==$cloudEnv_uid && type=='goods' && id=="${this.item._id}"`).remove().then(() => {
						this.$success("取消成功")
						this.item.is_fav = false;
						this.updateBottomOptions()
					}).catch(() => {
						uni.hideLoading();
						this.$message("取消失败")
					});
				} else {
					db.collection("tian-mall-favorite").add({
						id: this.item._id,
						title: this.item.name,
						avatar: this.item.goods_thumb,
						description: this.item.goods_summary,
						price: this.item.price,
						type: ["goods"],
					}).then(() => {
						this.$success("收藏成功")
						this.item.is_fav = true;
						this.updateBottomOptions()
					}).catch(() => {
						uni.hideLoading();
						this.$message("收藏失败")
					});
				}
			},
			leftClick(e) {
				if (e.index == 0) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else if (e.index == 1) {
					//收藏
					this.saveFav()
				} else {
					// 跳转购物车
					uni.switchTab({
						url: "/pages/index/cart"
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	.goods-detail-container {
		padding-bottom: 120rpx;

		.goods-thumb-box {
			width: 750rpx;
			height: 500rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		/* 自定义商铺LOGO */
		.custom-logo-box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			background-color: skyblue;
			background-image: url('/static/shop-logo-2.png');
			background-size: cover;
			/* 背景图片覆盖整个元素 */
			background-position: center;
			/* 背景图片居中 */

			.logo-box-name {
				font-size: 26rpx;
				font-weight: 550;
				color: #ff4400;
				line-height: 1.15;
				letter-spacing: 2rpx;
				text-shadow:
					-1px -1px 0 #fff,
					1px -1px 0 #fff,
					-1px 1px 0 #fff,
					1px 1px 0 #fff;
			}
		}

		.swiper-box {
			height: 750rpx;
		}

		.image {
			width: 750rpx;
			height: 750rpx;
		}

		.goods-carts {
			display: flex;
			flex-direction: column;
			position: fixed;
			z-index: 101;
			left: 0;
			right: 0;
			left: var(--window-left);
			right: var(--window-right);
			bottom: 0;
		}

		.sub-title {
			width: 88rpx;
			color: #aaaaaa;
		}

		.sub-nav-title {
			padding: 18rpx 24rpx 18rpx;
			font-weight: 600;

			&.normal {
				font-weight: normal;
			}
		}

		.user-avatar {
			position: relative;
			z-index: 100;
		}

		.more-avatar {
			margin-left: -30rpx;
		}

		.product-detail-title {
			border-left: #f40 solid 5px;
			display: flex;
			align-items: center;
			padding: 4rpx 0;
		}
	}

	.closeGb {
		position: absolute;
		right: -14px;
		top: -14px;
	}

	.popup {
		padding-bottom: var(--window-bottom);
	}
</style>